<template>
  <el-dialog v-model="dialogVisible" class="!border-rd-10px" title="一键配送" width="40%">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="征订主题">
        <span>{{ ruleForm.name }}</span>
      </el-form-item>
      <el-form-item label="征订状态">
        <span>{{ ruleForm.state }}</span>
      </el-form-item>
      <el-form-item label="截止时间">
        <span>{{ ruleForm.date }}</span>
      </el-form-item>
      <el-form-item label="配送状态">
        <div>
          <span>待配送订单：{{ ruleForm.statusNum }}</span>
          <div v-if="ruleForm.statusNum == 0" class="color-red">当前待配送订单数为0，不能进行一键配送操作</div>
        </div>
      </el-form-item>
      <el-form-item label="订单已完成通知">
        <div>
          <el-switch v-model="ruleForm.send" />
          <div class="color-#949494">是否向用户发送发货通知</div>
        </div>
      </el-form-item>
      <el-form-item label="配送类型">
        <el-radio-group v-model="ruleForm.type" @change="handleChangeRadio">
          <el-radio-button label="全部配送" :value="1" />
          <el-radio-button label="部分配送" :value="2" />
        </el-radio-group>
        <template v-if="ruleForm.type == 2">
          <el-cascader v-model="ruleForm.child" class="mt-10px" :options="options" />
        </template>
      </el-form-item>
      <el-form-item label="配送备注">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入配送备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定配送</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency'
          },
          {
            value: 'feedback',
            label: 'Feedback'
          },
          {
            value: 'efficiency',
            label: 'Efficiency'
          },
          {
            value: 'controllability',
            label: 'Controllability'
          }
        ]
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation'
          },
          {
            value: 'top nav',
            label: 'Top Navigation'
          }
        ]
      }
    ]
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components'
      },
      {
        value: 'sketch',
        label: 'Sketch Templates'
      },
      {
        value: 'docs',
        label: 'Design Documentation'
      }
    ]
  }
]
interface RuleForm {
  name: string
  state: string
  date: string
  statusNum: number
  send: boolean
  type: string
  remark: string
}
const statusNum = ref(0)
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '223',
  state: '12',
  date: '不限',
  statusNum: 0,
  send: false,
  type: 1,
  remark: ''
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!')
    } else {
      // console.log('error submit!', fields)
    }
  })
}

const handleChangeRadio = (val) => {
  // console.log(val)
}

const dialogVisible = ref(false)
function show(val) {
  dialogVisible.value = val
}
defineExpose({ show, dialogVisible })
</script>
<style scoped lang="scss"></style>
